<template>
  <view class="my">
    <view class="top">
      <view class="oilnum">{{ele.oilName}}</view>
      <view class="stationname">{{ele.stationName}}</view>
      <view class="paytime">{{ele.payDate}}</view>
      <view class="others">
        <view class="amount">
          <text>油品金额</text>
          <text>{{ele.oilPirce}}元/L x {{ele.orderLiters}}L</text>
        </view>
        <view class="carnum">
          <text>车牌号</text>
          <text>{{!!ele.truckNumber ? ele.truckNumber: "暂未设置"}}</text>
        </view>
      </view>
      <view class="full">
        <text>应付金额</text>
        <text>{{ele.receivableAmt}}元</text>
      </view>
    </view>
    <view class="center">
      <view class="amt">
        <text>实付金额</text>
        <text>{{ele.amt}}元 <text class="arrows"></text></text>
      </view>
      <view class="invoice">
        <text>
          可开票金额
        </text>
        <text>{{ele.amt}}元</text>
      </view>
    </view>
    <view class="bottom">
      <view class="ordernum">
        <text>订单编号</text>
        <text>{{ele.orderNo}}</text>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      ele:{}
    };
  },

  onLoad(option) {
    if(!option.orderNo){
      alert('此页不支持直接访问~')
    }
    this.init(option.orderNo)
  },
  mounted() {
    // this.getPointInfo();
  },
  methods: {

    async init(id) {
      try {
          if (this.phoneNumber) {
            const infoData = await this.$Request({
              url: "/selectOrderInfoByOrdNo",
              method: "GET",
              data: {
                orderNo:id
              }
            });
            if (infoData.retCode !== 0) {
              throw new Error(infoData.message);
            }
            this.ele = infoData.data
          }

        } catch (error) {
        }
    },
  },
};
</script>

<style lang="scss">
.my {
  padding: 40rpx;
  padding-bottom: 0;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f8f8f8;
  .top {
    background-color: #ffffff;
    overflow: hidden;
    padding: 20rpx 25rpx;
    display: flex;
    flex-direction: column;
    text-align: center;
    > view {
      line-height: 45rpx;
      font-size: 26rpx;
    }
    .oilnum {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 50rpx;
      font-weight: bolder;
    }
    .stationname {
    }
    .paytime {
      font-size: 25rpx;
    }
    .others {
      margin: 0 auto;
      margin-top: 50rpx;
      width: 100%;
      background-color: #f8f8f8;
      display: flex;
      flex-direction: column;
      border-radius: 15rpx;
      padding: 30rpx 30rpx;
      box-sizing: border-box;

      > view {
        height: 60rpx;
        line-height: 60rpx;
        display: flex;
        justify-content: space-between;
        text:nth-child(2) {
          color: #3c3c3c;
        }
      }
    }
    .full {
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      margin-top: 50rpx;
      margin-bottom: 60rpx;
      color: #0c0c0c;
      //font-weight:bold;
    }
  }
  .center {
    //background-color:#f8f8f8;
    > view {
      display: flex;
      justify-content: space-between;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 0 0 15rpx 15rpx;
      box-sizing: border-box;
      padding: 0 20rpx;
      font-size: 26rpx;
    }
    .amt {
      background-color: #e8e8e8;
      .arrows {
        color: #737373;
      }
    }
    .invoice {
      .icon {
        display: inline-block;
        width: 26rpx;
        height: 26rpx;
        border-radius: 13rpx;
        //background-color: #377ec4;
        margin-left: 20rpx;
        margin-bottom: -2px;
        background-size: 100% 100%;
      }
    }
  }
  .bottom {
    width: 100%;
    margin-top: 40rpx;
    font-size: 26rpx;
    > .ordernum {
      display: flex;
      justify-content: space-between;
      line-height: 100rpx;
      height: 100rpx;
      border-radius: 15rpx;
      background: #ffffff;
      box-sizing: border-box;
      padding: 0 20rpx;
      box-shadow: 0 1px 2px 2px rgba(201, 207, 207, 0.1);
    }
  }
}
</style>
